<template>
	<view class="content">
		<!-- 预约信息 -->
		<view class="user_info">
			<view class="info_row">
				<view class="row_tip">预约编号</view>
				<view class="row_info">{{reservationId}}</view>
			</view>

			<view class="info_row">
				<view class="row_tip">预约类型</view>
				<view class="row_info">
					<view class="res_type">
						<u-tag v-if="baseInfo.type==1" size="mini" text="个人预约" type="primary"></u-tag>
						<u-tag v-if="baseInfo.type==0" size="mini" text="课堂预约" type="success"></u-tag>
					</view>
				</view>
			</view>
			<view class="info_row">
				<view class="row_tip">预约日期</view>
				<view class="row_info">
					{{timeInfo.dateTime}}
				</view>
			</view>
			<view class="info_row">
				<view class="row_tip">预约时间段</view>
				<view class="row_info">
					{{timeOption.start}} - {{timeOption.end}}
				</view>
			</view>
			<view class="info_row">
				<view class="row_tip">当前状态</view>
				<view class="row_info">
					<view class="status_icon">
						<u-tag text="预约成功" :plain="true" v-if="baseInfo.status==2" size="mini" type="success"></u-tag>
						<u-tag text="待审核" :plain="true" v-if="baseInfo.status==1" size="mini"></u-tag>
						<u-tag text="已取消" :plain="true" v-if="baseInfo.status==4" size="mini" type="error"></u-tag>
						<u-tag text="预约失败" :plain="true" v-if="baseInfo.status==5" size="mini" type="error"></u-tag>
					</view>
				</view>
			</view>

		</view>

		<!-- 申请人信息 -->
		<view class="user_info">
			<view class="info_row">
				<view class="row_tip">申请人</view>
				<view class="row_info">{{baseInfo.userName}}</view>
			</view>
			<view class="info_row">
				<view class="row_tip">联系电话</view>
				<view class="row_info">{{accountInfo.mobile}}</view>
			</view>
			<view class="info_row">
				<view class="row_tip">身份信息</view>
				<view class="row_info">
					<view class="shenfen_icon">

						<u-tag v-if="accountInfo.roleId==1" text="老师" size="mini" type="warning"></u-tag>
						<u-tag v-if="accountInfo.roleId==2" text="学生" size="mini" type="success"></u-tag>
					</view>
				</view>
			</view>

		</view>
		<!-- 实验室信息 -->
		<view class="user_info">
			<view class="info_row">
				<view class="row_tip">实验室名称</view>
				<view class="row_info">{{labInfo.labName}}</view>
			</view>
			<view class="info_row">
				<view class="row_tip">实验室地址</view>
				<view class="address">
					{{labInfo.address}}
				</view>
			</view>
			<view class="info_row">
				<view class="row_tip">申请原因</view>
				<view class="address">
					{{baseInfo.askReason}}
				</view>
			</view>

			<view class="info_row" v-if="baseInfo.status==5">
				<view class="row_tip">拒绝理由</view>
				<view class="address">

					{{baseInfo.rejectReason}}
				</view>
			</view>


		</view>
		<view class="info" v-if="false">

			<!-- 标题 -->
			<view class="title">{{labInfo.labName}}</view>
			<view class="bianhao">
				预约编号：<text class="b_id">{{reservationId}}</text>
			</view>
			<view class="bianhao">
				预约类型：<view class="res_type">
					<u-tag v-if="baseInfo.type==1" size="mini" text="个人预约" type="primary"></u-tag>
					<u-tag v-if="baseInfo.type==0" size="mini" text="课堂预约" type="success"></u-tag>
				</view>

			</view>
			<!-- 申请人 -->
			申请人信息:
			<view class="userInfo">
				<view class="row">
					<u-row>
						<u-col :span="5">
							<view class="username">申请人：{{baseInfo.userName}}</view>
						</u-col>
						<u-col :span="6">
							<view class="username">电话：{{accountInfo.mobile}}</view>
						</u-col>
					</u-row>
				</view>
				<view class="row">
					<u-row>
						<u-col :span="6">
							<view class="shenfen_info">
								身份：
								<view class="shenfen_icon">

									<u-tag v-if="accountInfo.roleId==1" text="老师" size="mini" type="warning"></u-tag>
									<u-tag v-if="accountInfo.roleId==2" text="学生" size="mini" type="success"></u-tag>
								</view>
							</view>
						</u-col>

					</u-row>
				</view>

			</view>
			预约状态：
			<!-- 预约状态 -->
			<view class="status">
				<view class="row">
					<u-row>
						<u-col :span="6">
							<view class="status_info">当前状态：
								<view class="status_icon">
									<u-tag text="预约成功" v-if="baseInfo.status==2" size="mini" type="success"></u-tag>
									<u-tag text="待审核" v-if="baseInfo.status==1" size="mini"></u-tag>
									<u-tag text="已取消" v-if="baseInfo.status==4" size="mini" type="error"></u-tag>
									<u-tag text="预约失败" v-if="baseInfo.status==5" size="mini" type="error"></u-tag>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>


			</view>
			实验室信息:
			<!-- 实验室信息 -->
			<view class="labInfo">
				<view class="row">
					<u-row>
						<u-col :span="12">
							<view class="username">实验室名称：{{labInfo.labName}}</view>
						</u-col>

					</u-row>
				</view>
				<view class="row">
					<u-row>
						<u-col :span="12">
							<view class="username">实验室地址：{{labInfo.address}}</view>
						</u-col>

					</u-row>
				</view>
				<view class="row">
					<u-row>
						<u-col :span="12">
							<view class="username">预约日期：{{timeInfo.dateTime}}</view>
						</u-col>

					</u-row>
				</view>
				<view class="row">
					<u-row>
						<u-col :span="6">
							<view class="username">开始时间：{{timeOption.start}}</view>
						</u-col>
						<u-col :span="6">
							<view class="username">结束时间：{{timeOption.end}}</view>
						</u-col>
					</u-row>
				</view>

			</view>
			申请理由:
			<!-- 申请理由 -->
			<view class="res_shen">
				<view class="row">
					<u-row>
						<u-col :span="12">
							<view class="username">{{baseInfo.askReason}}</view>
						</u-col>

					</u-row>
				</view>
			</view>

			<text v-if="baseInfo.status==5">拒绝理由：</text>
			<!-- 拒绝理由 -->
			<view class="res_reject" v-if="baseInfo.status==5">
				<view class="row">
					<u-row>
						<u-col :span="12">
							<view class="username">{{baseInfo.rejectReason}}</view>
						</u-col>

					</u-row>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getResDetail
	} from '../../api/reservation.js'
	export default {
		data() {
			return {
				baseInfo: {},
				reservationId: "",
				accountInfo: {},
				labInfo: {},
				timeInfo: {},
				timeOption: {}
			}
		},
		onLoad(options) {
			// let a = JSON.parse(decodeURIComponent(options.baseInfo))
			// this.baseInfo = {
			// 	...a
			// }
			let reservationId = options.reservationId
			// console.log(reservationId);
			this.reservationId = reservationId
			this.handleDetail()
		},
		methods: {
			handleDetail() {
				getResDetail({
					reservationId: this.reservationId
				}).then(res => {
					// console.log(res);


					this.baseInfo = res.data
					this.accountInfo = res.data.accountInfo
					this.labInfo = res.data.labInfo
					this.timeInfo = res.data.timeInfo
					this.timeOption = res.data.timeOption
					this.reservationId = res.data.reservationId
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		padding: 20upx;

		.user_info {
			width: 100%;
			min-height: 288upx;
			background-color: #fff;
			box-sizing: border-box;
			box-shadow: 0 0 10px rgba(0, 0, 0, .15);
			border-radius: 20upx;
			margin-bottom: 30upx;

			.info_row {
				width: 100%;
				min-height: 75upx;
				border-bottom: 2upx solid #f1f1f1f1;
				display: flex;
				flex-direction: row;
				justify-content: flex-satrt;
				align-items: center;
				padding: 10upx 0;

				.address {
					flex: 1;
				}

				.row_tip {
					font-size: 30upx;
					font-weight: 700;
					width: 191upx;
					box-sizing: border-box;
					padding: 0 20upx;
				}

				.row_info {
					font-size: 30upx;
					font-weight: 400;

					.shenfen_icon {
						width: 80upx;
					}

					.status_icon {
						width: 125upx;
					}

					.res_type {
						width: 125rpx;
						height: 50upx;
					}
				}

			}
		}

		.info {
			width: 100%;
			min-height: 90vh;
			background-color: #fff;
			box-sizing: border-box;
			box-shadow: 0 0 10px rgba(0, 0, 0, .15);
			border-radius: 20upx;
			padding: 20upx;
			font-weight: 700;

			.title {
				font-size: 40upx;
				height: 50upx;
				text-align: left;
				text-align: center;
				margin-bottom: 20upx;
			}

			.bianhao {
				width: 100%;
				margin-bottom: 20upx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;

				.b_id {
					font-weight: 400;

				}

				.res_type {
					width: 125rpx;
					height: 50upx;
				}
			}

			.userInfo {
				width: 100%;
				margin-top: 20upx;
				font-weight: 400;

				.shenfen_info {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					.shenfen_icon {
						width: 80upx;
					}
				}

				.row {
					width: 100%;
					margin-bottom: 15upx;
				}
			}

			.status {
				width: 100%;
				margin-top: 20upx;
				font-weight: 400;

				.status_info {
					display: flex;
					flex-direction: row;
					justify-content: flex-start;
					align-items: center;

					.status_icon {
						width: 125upx;
					}
				}

				.row {
					width: 100%;
					margin-bottom: 15upx;

				}
			}

			.labInfo {
				width: 100%;
				margin-top: 20upx;
				font-weight: 400;

				.row {
					width: 100%;
					margin-bottom: 15upx;
				}
			}

			.res_shen {
				width: 100%;
				margin-top: 20upx;
				font-weight: 400;

				.row {
					width: 100%;
					margin-bottom: 15upx;
				}
			}

			.res_reject {
				width: 100%;
				margin-top: 20upx;
				font-weight: 400;

				.row {
					width: 100%;
					margin-bottom: 15upx;
				}
			}
		}
	}
</style>